<template>
  <div>
    <div class="top" @click="reLoading">
      <img src="../assets/app-home.jpg" alt="" /><span class="location poiner"
        >APP</span
      >
    </div>
    <div class="banner">
      <div class="banner-size new-user" v-if="fansTotal.newUser">
        <div style="font-size: 1.2rem; display: flex; align-items: center">
          <img
            src="../assets/user.png"
            alt=""
            style="width: 1.5rem; margin-right: 1.2rem"
          />新增用户
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">今日</div>

          <span style="margin-left: 1rem">
            {{ fansTotal.newUser.todayNewUsers }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">昨日</div>
          <span style="margin-left: 1rem">
            {{ fansTotal.newUser.yesterdayNewUsers }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">七日平均</div>
          <span style="margin: 0 3.38rem 0 1rem">{{
            fansTotal.newUser.seven_average
          }}</span
          ><span style="font-size: 1rem; margin-right: 0.8rem; font-weight: 400"
            >{{ fansTotal.newUser.seven_average_growth }}%</span
          ><img
            v-if="fansTotal.newUser.seven_average_growth > 0"
            src="../assets/up-arrow.png"
            alt=""
          /><img src="../assets/arrowdown.png" alt="" v-else />
        </div>
      </div>
      <div class="banner-size active-user" v-if="fansTotal.activeUser">
        <div style="font-size: 1.2rem; display: flex; align-items: center">
          <img
            src="../assets/heart.png"
            alt=""
            style="width: 1.5rem; margin-right: 1.2rem"
          />活跃用户
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">今日</div>
          <span style="margin-left: 1rem">
            {{ fansTotal.activeUser.todayActivityUsers }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">昨日</div>
          <span style="margin-left: 1rem">
            {{ fansTotal.activeUser.yesterdayActivityUsers }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">七日平均</div>
          <span style="margin: 0 3.38rem 0 1rem">{{
            fansTotal.activeUser.seven_average
          }}</span
          ><span style="font-size: 1rem; margin-right: 0.8rem; font-weight: 400"
            >{{ fansTotal.activeUser.seven_average_growth }}%</span
          ><img
            v-if="fansTotal.activeUser.seven_average_growth > 0"
            src="../assets/up-arrow.png"
            alt=""
          />
          <img src="../assets/arrowdown.png" alt="" v-else />
        </div>
      </div>
      <div class="banner-size click-num" v-if="fansTotal.launches">
        <div style="font-size: 1.2rem; display: flex; align-items: center">
          <img
            src="../assets/click.png"
            alt=""
            style="width: 1.5rem; margin-right: 1.2rem"
          />启动次数
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">今日</div>
          <span style="margin-left: 1rem">
            {{ fansTotal.launches.todayLaunches }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">昨日</div>
          <span style="margin-left: 1rem">
            {{ fansTotal.launches.yesterdayLaunches }}
          </span>
        </div>
        <div class="date flex align-center">
          <div style="width: 6rem">七日平均</div>
          <span style="margin: 0 3.38rem 0 1rem">{{
            fansTotal.launches.seven_average
          }}</span
          ><span style="font-size: 1rem; margin-right: 0.8rem; font-weight: 400"
            >{{ fansTotal.launches.seven_average_growth }}%</span
          ><img
            v-if="fansTotal.launches.seven_average_growth > 0"
            src="../assets/up-arrow.png"
            alt=""
          />
          <img src="../assets/arrowdown.png" alt="" v-else />
        </div>
      </div>
    </div>
    <div class="form">
      <div style="font-size: 22px; margin: 0 0 1.88rem 0; font-weight: 700">
        <span
          style="
            display: inline-block;
            margin: 0 1rem -0.5rem 0;
            width: 0.44rem;
            height: 2.2rem;
            background: #37c1c3;
            border-radius: 11px;
          "
        ></span
        >城市数据
      </div>
      <div class="flex between">
        <div class="flex">
          <span
            class="el-icon-date"
            style="
              color: #37c1c3;
              font-size: 19.2px;
              position: relative;
              left: 30px;
              top: 5px;
              z-index: -1;
            "
          ></span>
          <!-- <span style="
              font-size: 1.2rem;
              position: relative;
              left: 9.2rem;
              top: 0.2rem;
              z-index: 1;
            ">-</span> -->
          <el-date-picker
            v-model="value1"
            type="daterange"
            @change="selectDate"
            format="yyyy/MM/dd"
            value-format="yyyyMMdd"
            range-separator="-"
            :clearable="false"
            :start-placeholder="fromTime"
            :picker-options="pickerOptions"
            size="medium"
            prefix-icon="none"
            style="
              width: 240px;
              height: 30px;
              margin-bottom: 20px;
              background-color: transparent;
              border: 1 px solid #888888;
            "
            :end-placeholder="goTime"
          >
          </el-date-picker>

          <div
            class="flex align-center"
            style="margin-bottom: 24px; font-size: 1.1rem; color: #37c1c3"
            v-if="totalData.length !== 0"
          >
            <img
              src="../assets/Frame.png"
              alt=""
              style="width: 1.1rem; margin: 0 9px 0 1.5rem"
            />{{ dateNone }}日查询无数据，请及时采集
          </div>
        </div>

        <div class="flex flex-end" style="margin-bottom: 20px">
          <el-input
            placeholder="城市搜索"
            v-model="input2"
            @input="getInput"
            style="
              padding-left: 9px;
              width: 160px;
              height: 30px;
              font-size: 15px;
            "
          >
          </el-input>
          <span
            class="el-icon-search poiner"
            @click="searchCity"
            style="
              position: relative;
              left: -30px;
              top: 8.5px;
              color: #37c1c3;
              font-size: 15px;
            "
          ></span>
          <div class="flex poiner" style="margin: 0 20px" @click="goDetail">
            <img
              src="../assets/prod.png"
              style="width: 21px; height: 21px; margin-top: 0.1rem"
              alt=""
            />
            <span style="color: #37c1c3; font-size: 16px">查看详情数据</span>
          </div>
          <div class="flex poiner" @click="exportExcel(1)">
            <img
              src="../assets/out.png"
              style="width: 21px; height: 21px"
              alt=""
            />
            <span
              class="flex"
              style="color: #37c1c3; font-size: 16px; margin-left: 0.5rem"
              >导出</span
            >
          </div>
        </div>
      </div>
      <el-table
        class="customer-table"
        :header-cell-style="{ background: '#f2f2f2' }"
        ref="multipleTable"
        :data="cityTotal"
        style="width: 100%"
        @select="checkCity"
        @select-all="checkAllCity"
      >
        <el-table-column
          type="selection"
          width="55"
          style="background: #f2f2f2"
          align="center"
        >
        </el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center">
          <template scope="scope">
            <span v-if="showSearch">{{
              (currentPage - 1) * 10 + scope.$index + 1
            }}</span>
            <span v-else>{{ searchIndex + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="place_name" label="城市" align="center">
        </el-table-column>
        <el-table-column prop="new_fans" label="新增用户" align="center">
        </el-table-column>
        <el-table-column prop="active_fans" label="活跃用户" align="center">
        </el-table-column>
        <el-table-column prop="start_num" label="启动次数" align="center">
        </el-table-column>
      </el-table>
      <div
        class="flex flex-end"
        style="text-align: center; margin: 30px 0 74px 0"
        v-if="totals"
      >
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totals"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <div v-if="this.details.length !== 0">
        <div class="flex align-center between" style="margin-bottom: 20px">
          <span style="color: #37c1c3; font-weight: 700">城市详细数据</span>
          <div class="flex poiner align-center" @click="exportExcel(2)">
            <img src="../assets/out.png" alt="" />
            <span style="color: #37c1c3; margin-left: 8px">导出</span>
          </div>
        </div>
        <el-table
          :data="details"
          class="customer-table"
          :header-cell-style="{ background: '#f2f2f2' }"
        >
          <el-table-column label="日期" prop="id_no" width="150" align="center">
          </el-table-column>
          <el-table-column prop="place_name" label="城市" align="center">
          </el-table-column>
          <el-table-column prop="new_fans" label="新增用户" align="center">
          </el-table-column>
          <el-table-column prop="active_fans" label="活跃用户" align="center">
          </el-table-column>
          <el-table-column prop="start_num" label="启动次数" align="center">
          </el-table-column>
        </el-table>
        <div class="flex flex-end" style="margin: 30px 0 80px 0">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="detailTotals"
            @current-change="handleCurrentChangeTwo"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Blob from "@/excel/Blob";
import { exportJsonToExcel } from "@/excel/Export2Excel";
export default {
  name: "appdata",
  inject: ["reload"],
  data() {
    return {
      fromTime: "",
      goTime: "",
      value1: "",
      input2: "",
      noneData: [],
      dateNone: "",
      dataArray: [],
      newData: [],
      totalData: [],
      fansTotal: [],
      cityTotal: [],
      cityName: [],
      frist: "",
      totals: 0,
      startTime: "",
      endTime: "",
      details: [],
      outData: [],
      chooseCity: [],
      searchIndex: 1,
      showSearch: true,
      selectCity: [],
      outName: [],
      detailTotals: 0,
      duedate: "",
      startDate: "2021-10-01 00:00:00",
      str: [],
      currentPage: 1,
      pickerOptions: {
        disabledDate: (time) => {
          // time是当前显示面板的每一个日期
          if (this.totalData.length === 0) {
            if (
              time.getTime() > Date.now() - 3600 * 1000 * 24 ||
              time.getTime() < new Date(this.startDate).getTime()
            ) {
              // disabledDate属性：true为禁用，false为可用
              return true;
            }
          } else {
            for (let i = 0; i < this.totalData.length; i++) {
              // 其中res.dateParam为获取到的需要禁用的时间
              if (
                time.getTime() == new Date(this.totalData[i]).getTime() ||
                time.getTime() > Date.now() - 3600 * 1000 * 24 ||
                time.getTime() < new Date(this.startDate).getTime()
              ) {
                // disabledDate属性：true为禁用，false为可用
                return true;
              }
            }
          }
        },
      },
    };
  },
  created() {
    const end = new Date();
    const start = new Date();
    const frist = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
    this.startTime = this.stringToDate(start);
    this.endTime = this.stringToDate(end);
    this.fromTime = this.startTime.replace(/-/g, "/");
    this.goTime = this.endTime.replace(/-/g, "/");
    this.startTime =
      this.startTime.toString().substring(0, 4) +
      `` +
      this.startTime.toString().substring(5, 7) +
      `` +
      this.startTime.toString().substring(8, 10);
    this.endTime =
      this.endTime.toString().substring(0, 4) +
      `` +
      this.endTime.toString().substring(5, 7) +
      `` +
      this.endTime.toString().substring(8, 10);
    // 日期禁止选择范围
    for (let i = 1; i < 30; i++) {
      let str = "";
      str = new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * i);
      let strr = this.stringToDate(str) + ` 00:00:00`;
      this.dataArray.push(strr);
      if (strr === "2021-10-01 00:00:00") {
        break;
      }
    }

    // banner图数据
    this.$http.get("public/?s=Umeng_Umeng.getDailyData").then((res) => {
      this.fansTotal = res.data.data[0];
    });
    // 默认城市数据
    this.$http
      .get(
        `public/?s=Umeng_Umeng.getCityData&page=1&limit=10&startTime=${this.startTime}&endTime=${this.endTime}`
      )
      .then((res) => {
        this.totals = res.data.data[0].count;
        this.cityTotal = res.data.data[0].content;
      });

    // 筛选没有数据日期
    this.$http
      .get(`public/?s=Umeng_Umeng.getHasData&startTime=20211001`)
      .then((res) => {
        let dates = res.data.data.dateArray;
        let newdate = [];
        dates.forEach((val) => {
          val =
            val.toString().substring(0, 4) +
            `-` +
            val.toString().substring(4, 6) +
            `-` +
            val.toString().substring(6, 8);
          newdate.push(val);
        });
        dates = newdate;
        dates.forEach((el) => {
          el = el + ` 00:00:00`;
          if (!this.newData.includes(el)) {
            this.newData.push(el);
          }
        });
        this.dataArray.forEach((el) => {
          if (!this.newData.includes(el)) {
            this.totalData.push(el);
          }
        });
        this.totalData.forEach((val) => {
          this.noneData.push(val.substring(5, 7) + "/" + val.substring(8, 10));
        });
        this.dateNone = this.noneData.join("、");
      });
  },
  methods: {
    /**
     * 日期转换
     * @method stringToDate
     */
    stringToDate(strDate) {
      let date = new Date(strDate);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = `${y}-${m}-${d}`;
      this.duedate = time;
      return this.duedate;
    },

    /**
     * 城市分页切换按钮
     * @method handleCurrentChange
     * @param val 当前页
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$http
        .get(
          `public/?s=Umeng_Umeng.getCityData&page=${val}&limit=10&startTime=${this.startTime}&endTime=${this.endTime}`
        )
        .then((res) => {
          this.totals = res.data.data[0].count;
          this.cityTotal = res.data.data[0].content;
          this.$nextTick(() => {
            this.cityTotal.forEach((row) => {
              if (this.cityName.indexOf(row.place_name) >= 0) {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              }
            });
          });
        });
    },
    /**
     * 城市详细数据分页切换按钮
     * @method handleCurrentChange
     * @param val 当前页
     */
    handleCurrentChangeTwo(val) {
      let cityss = this.chooseCity.concat();
      cityss.sort(this.sortRule("new_fans"));
      let cName = [];
      cityss.forEach((el) => {
        cName.push(el.place_name);
      });
      const name = cName.join(",");
      this.$http
        .get(
          `public/?s=Umeng_Umeng.getCityData&page=${val}&limit=10&cityName=${name}&startTime=${this.startTime}&endTime=${this.endTime}&searchType=1`
        )
        .then((res) => {
          this.detailTotals = res.data.data[0].count;
          this.details = res.data.data[0].content;
          this.transform(this.details, "/");
        });
    },

    /**
     * 搜索城市
     * @method searchCity
     */
    searchCity() {
      if (this.input2 !== "") {
        this.$http
          .get(
            `public/?s=Umeng_Umeng.getCityData&startTime=${this.startTime}&endTime=${this.endTime}&limit=10000`
          )
          .then((res) => {
            this.currentPage = 1;
            // this.totals = res.data.data[0].count;
            let cityArray = res.data.data[0].content;
            let array = [];
            cityArray.forEach((val, index) => {
              if (val.place_name === `${this.input2}市`) {
                array.push(val);
                this.searchIndex = index;
              } else if (val.place_name === `${this.input2}`) {
                array.push(val);
                this.searchIndex = index;
              }
            });

            this.showSearch = false;
            this.cityTotal = array;
            this.totals = array.length;
            this.$nextTick(() => {
              this.cityTotal.forEach((row) => {
                if (this.cityName.indexOf(row.place_name) >= 0) {
                  this.$refs.multipleTable.toggleRowSelection(row, true);
                }
              });
            });
          });
      }
    },

    /**
     * 获取搜索框得值
     * @method getInput
     */
    getInput() {
      if (this.input2 === "") {
        this.showSearch = true;
        this.$http
          .get(
            `public/?s=Umeng_Umeng.getCityData&page=1&limit=10&startTime=${this.startTime}&endTime=${this.endTime}`
          )
          .then((res) => {
            this.currentPage = 1;
            this.totals = res.data.data[0].count;
            this.cityTotal = res.data.data[0].content;
            this.$nextTick(() => {
              this.cityTotal.forEach((row) => {
                if (this.cityName.indexOf(row.place_name) >= 0) {
                  this.$refs.multipleTable.toggleRowSelection(row, true);
                }
              });
            });
          });
      }
    },

    /**
     * 选择日期
     * @method selectDate
     * @param val 时间对象
     */
    selectDate(val) {
      this.cityName = [];
      this.chooseCity = [];
      this.startTime = val[0];
      this.endTime = val[1];
      this.$http
        .get(
          `public/?s=Umeng_Umeng.getCityData&page=1&limit=10&startTime=${this.startTime}&endTime=${this.endTime}`
        )
        .then((res) => {
          this.totals = res.data.data[0].count;
          this.cityTotal = res.data.data[0].content;
          this.currentPage = 1;
        });
    },

    /**
     * 挑选框选择事件
     * @method checkCity
     * @param val 选中行对象
     */
    checkCity(val, select) {
      this.cityName.forEach((el, idx) => {
        if (el === select.place_name) {
          this.cityName.splice(idx, 1);
          this.chooseCity.splice(idx, 1);
        }
      });
      val.forEach((el) => {
        this.cityName.push(el.place_name);
        this.chooseCity.push(el);
      });
      this.cityName = Array.from(new Set(this.cityName));
      for (var i = 0; i < this.chooseCity.length; i++) {
          for (var j = i + 1; j < this.chooseCity.length; j++) {
            if (this.chooseCity[i].place_name === this.chooseCity[j].place_name) {
              this.chooseCity.splice(j, 1);
              j = j - 1;
            }
          }
        }
    },

    checkAllCity(val) {
      let city = JSON.parse(JSON.stringify(val));
      if (city.length !== 0) {
        this.selectCity = city;
        city.forEach((el) => {
          this.cityName.push(el.place_name);
          this.chooseCity.push(el);
        });
        this.cityName = Array.from(new Set(this.cityName));
        for (var i = 0; i < this.chooseCity.length; i++) {
          for (var j = i + 1; j < this.chooseCity.length; j++) {
            if (this.chooseCity[i].place_name === this.chooseCity[j].place_name) {
              this.chooseCity.splice(j, 1);
              j = j - 1;
            }
          }
        }
      } else {
        this.cityTotal.forEach((value) => {
          for (var key in this.cityName) {
            if (this.cityName[key] === value.place_name) {
              this.cityName.splice(key, 1);
              this.chooseCity.splice(key, 1);
            }
          }
        });
      }
    },

    reLoading() {
      window.location.reload();
    },

    sortRule(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      }; // 如果a>=b，返回自然数，不用交换位置
    },

    /**
     * 打开详情数据
     * @method goDetail
     */
    goDetail() {
      if (this.endTime !== "" && this.cityName.length !== 0) {
        let cityss = this.chooseCity.concat();
        cityss.sort(this.sortRule("new_fans"));
        let cName = [];
        cityss.forEach((el) => {
          cName.push(el.place_name);
        });
        this.outName = cName;
        const name = cName.join(",");
        this.details = [];
        this.$http
          .get(
            `public/?s=Umeng_Umeng.getCityData&page=1&limit=10&cityName=${name}&startTime=${this.startTime}&endTime=${this.endTime}&searchType=1`
          )
          .then((res) => {
            if (res.data.data[0].content.length === 0) {
              this.$alert("该时间段或城市暂无数据", "提示", {
                confirmButtonText: "确定",
              });
            } else {
              this.detailTotals = res.data.data[0].count;
              this.details = res.data.data[0].content;
              this.transform(this.details, "/");
            }
          });
      } else if (this.cityName.length === 0 && this.endTime !== "") {
        this.$alert("请选择城市", "提示", {
          confirmButtonText: "确定",
        });
      } else if (this.cityName.length === 0 && this.endTime === "") {
        this.$alert("请选择日期和城市", "提示", {
          confirmButtonText: "确定",
        });
      } else if (this.cityName.length !== 0 && this.endTime === "") {
        this.$alert("请选择日期", "提示", {
          confirmButtonText: "确定",
        });
      }
    },

    /**
     * 日期添加分隔符
     * @method transform
     * @param value 城市数据数组
     */
    transform(value, type) {
      value.forEach((val) => {
        let dates = val.id_no.toString();
        val.id_no =
          dates.substring(0, 4) +
          `${type}` +
          dates.substring(4, 6) +
          `${type}` +
          dates.substring(6, 8);
      });
    },

    /**
     * 导出表格
     * @method exportExcel
     * @param value 数字判断按钮
     */
    exportExcel(num) {
      if (num === 1) {
        if (this.cityName.length !== 0) {
          const name = this.cityName.join(",");
          this.$http
            .get(
              `public/?s=Umeng_Umeng.getCityData&page=1&limit=10000&startTime=${this.startTime}&endTime=${this.endTime}`
            )
            .then((res) => {
              let content = res.data.data[0].content;
              let outArray = [];
              content.forEach((val) => {
                if (this.cityName.includes(val.place_name)) {
                  outArray.push(val);
                }
              });
              this.transform(outArray, "/");
              this.toExcle(outArray);
            });
        } else {
          this.$http
            .get(
              `public/?s=Umeng_Umeng.getCityData&page=1&limit=10000&startTime=${this.startTime}&endTime=${this.endTime}`
            )
            .then((res) => {
              this.outData = res.data.data[0].content;
              this.toExcle(this.outData);
            });
        }
      } else if (num === 2) {
        const name = this.outName.join(",");
        this.$http
          .get(
            `public/?s=Umeng_Umeng.getCityData&page=1&limit=100&cityName=${name}&startTime=${this.startTime}&endTime=${this.endTime}&searchType=1`
          )
          .then((res) => {
            let content = res.data.data[0].content;
            this.transform(content, "/");
            this.detailExcle(content);
          });
      }
    },

    /**
     * 详情表格方法
     * @method detailExcle
     * @param value 城市数据
     */
    detailExcle(val) {
      require.ensure([], () => {
        // 设置Excel的表格第一行的标题
        const tHeader = ["日期", "城市", "新增用户", "活跃用户", "启动次数"];
        //  'date', 'struct1', 'struct2'对象的属性
        const filterVal = [
          "id_no",
          "place_name",
          "new_fans",
          "active_fans",
          "start_num",
        ];
        // 数据集
        const list = val;
        const data = this.formatJson(filterVal, list);
        // excel名称可自定义
        const excelName = "app城市详细数据";
        exportJsonToExcel(tHeader, data, excelName);
      });
    },

    /**
     * 城市表格方法
     * @method toExcle
     * @param value 城市数据
     */
    toExcle(val) {
      require.ensure([], () => {
        // 设置Excel的表格第一行的标题
        const tHeader = ["城市", "新增用户", "活跃用户", "启动次数"];
        //  'date', 'struct1', 'struct2'对象的属性
        const filterVal = [
          "place_name",
          "new_fans",
          "active_fans",
          "start_num",
        ];
        // 数据集
        const list = val;
        const data = this.formatJson(filterVal, list);
        // excel名称可自定义
        const excelName = "app城市数据";
        exportJsonToExcel(tHeader, data, excelName);
      });
    },
    /**
     * 格式化json
     * @method formatJson
     * @param {filterVal jsonData} 城市数据， 对应的key
     */
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style scoped>
/* @import url('../../style.css'); */
.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.just-center {
  justify-content: center;
}

.column {
  flex-direction: column;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}
.top {
  padding: 10px 0 10px 15px;
  font-size: 12px;
  background-color: rgb(245, 245, 245);
  color: #4c8fbd;
}
.top img {
  margin: 0 5px 2px 0;
  vertical-align: middle;
}
.banner {
  min-width: 1000px;

  display: flex;
  justify-content: space-between;
  margin: 2.25rem 25.45rem 4.13rem 2.13rem;
}
.new-user {
  background-image: url("../assets/purple.png");
}

.active-user {
  background-image: url("../assets/orange.png");
}
.click-num {
  background-image: url("../assets/blue.png");
}
.banner-size {
  box-sizing: border-box;
  min-width: 282px;
  padding: 1rem 0px 1rem 2.06rem;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1rem;
  color: #fff;
}
.date {
  margin: 0.63rem 0;
  font-size: 1rem;
}
.date span {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
}
.form {
  min-width: 1000px;
  margin: 0 25.45rem 0 2.13rem;
}
.data i {
  font-size: 16px;
}
.date img {
  width: 2rem;
  margin-right: 3.56rem;
}

.margin {
  margin: 66px 150px 20px 154px;
}
.customer-table {
  border: 1px solid #f2f2f2;
}
.el-input i {
  color: #37c1c3;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: 1px solid #37c1c3 !important;
  background-color: transparent !important;
  color: #37c1c3;
}
::v-deep .el-date-editor .el-range__close-icon {
  display: none !important;
}

::v-deep .el-range-editor--medium.el-input__inner {
  padding-right: 0px;
}

.poiner {
  cursor: pointer;
}
.location:hover {
  border-bottom: 1px solid #4c8fbd;
}
::v-deep .is-leaf .cell {
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #555555;
}
::v-deep td {
  font-size: 15px !important;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  color: #333333;
}
::v-deep .el-input__inner {
  height: 30px;
  padding: 0 1rem;
  font-size: 15px;
}
</style>
